<template>
	<view class="receivingAddress">
		<u--form class="formContent" labelPosition="left" :model="model" :rules="rules" ref="uForm">
			<u-form-item @tap="openTime" labelWidth='120' label="添加时段" prop="formData.time" borderBottom ref="time">
				<u--input disabled disabledColor="#ffffff" v-model="model.formData.time" border="none"
					placeholder="请添加时段"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item labelWidth='120' label="是否启用" prop="formData.isEnable" ref="isEnable">
				<u-switch slot="right" activeColor="rgba(68, 212, 168, 1)"
					v-model="model.formData.isEnable"></u-switch>
			</u-form-item>
		</u--form>
		<view class="commonBtn">
			<view class="btnCon" @tap="saveInfo">
				<text>保存</text>
			</view>
		</view>
		<time-span ref="timeRef" @sureDate='sureDate' :isLimitTime='true'></time-span>
	</view>
</template>

<script>
	import timeSpan from '../components/timeSpan.vue';
	export default {
		components: {
			timeSpan,
		},
		data() {
			return {
				model: {
					formData: {
						time: "",
						isEnable:"",
					},
				},
				rules: {
					'formData.time': {
						type: 'string',
						required: true,
						message: '请添加时段',
						trigger: ['blur', 'change']
					},
				},
			}
		},
		methods: {
			openTime(){
				this.$refs.timeRef.init()
			},
			saveInfo() {
				this.$refs.uForm.validate().then(res => {
					uni.$u.toast('校验通过')
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.receivingAddress {

		.formContent {
			background-color: #fff;
			padding: 24rpx;
		}
	}

	.u-form-item {
		height: 96rpx;
	}

	::v-deep .u-form-item {
		height: 96rpx;
	}

	.u-popup__content {
		border-radius: 36rpx;
	}

	::v-deep .u-popup__content {
		border-radius: 36rpx;
	}
</style>